<template>
  <div id="appointmentTime">
    <header>
      <i @click="goBack()"></i>
      <div>患者管理</div>
    </header>
    <vue-event-calendar :events="demoEvents" @day-changed="handleDayChanged" @month-changed="handleMonthChanged">
    </vue-event-calendar>
    <div style="padding:10px 15px;">
      <div style="color: #4a3528;
        font-size: 15px;font-weight:600;letter-spacing:2px;">
        <!-- <i style=""></i> -->
        预约数量</div>
      <div style="color: rgba(74,53,40,0.3);
        font-size: 9px;font-weight:600;">RESERVATION QUANTUTY</div>
      <table>
        <tr>
          <th v-for="item in list" @click="goTime(item.time)">{{item.time==undefined?'':item.time.substring(5)}}</th>
          <th v-if="list.length==0">无</th>
        </tr>
        <tr>
          <td v-for="item in list"><i>{{item.count}}</i></td>
          <td v-if="list.length==0"><i>0</i></td>
        </tr>
      </table>
    </div>
    <ul>
      <li>
        <router-link :to='{name: "allpatient",query:{user:user}}'>
          <div>
            <img src="../../image/appointment.png" alt="">
          </div>
          <h3>我的患者</h3>
          <span></span>
        </router-link>
      </li>
      <li v-if="this.$route.query.user=='doctor'">
        <router-link :to='{name: "medical_records"}'>
          <div><img src="../../image/records.png" alt=""></div>
          <h3>患者病历</h3>
          <span></span>
        </router-link>
      </li>
      <li>
        <router-link :to='{name: "returnVisit",query:{user:user}}'>
          <div>
            <img src="../../image/returnVisit.png" alt="">
          </div>
          <h3>回访</h3>
          <span></span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  let today = new Date()
  export default {
    data() {
      return {
        user: '',
        num: '0',
        price: '10',
        currentWeek: '',
        currentDay: '',
        demoEvents: [], //日期可点击的日期数组
        list: []
      }
    },
    methods: {
      //返回上一级
      goBack() {
        this.$router.push({
          name: 'home',
        });
      },
      goTime(time) {
        this.$router.push({
          name: 'patienttime',
          query: {
            time: time,
            user: this.$route.query.user
          }
        });

      },
      //把所有日期都设为可点击的
      init(data) {
        // this.user = JSON.parse(localStorage.getItem('type'));
        this.user = this.$route.query.user;
        var month;
        if (data) {
          month = data;
        } else {
          month = `${today.getFullYear()}/${today.getMonth() + 1}`;
        }
        for (let i = 1; i <= 31; i++) {
          const date = month + '/' + i;
          this.demoEvents.push({
            date: date
          });
        }
      },
      //日改变
      handleDayChanged(data) {
        //给选中日期添加样式
        var date = data.date.split(" ")[0].split('/');
        this.currentDay = date[0] + '年' + date[1] + '月' + date[2] + '日'
        // this.currentWeek = '周' + date.getDay();
      },
      //年月改变
      handleMonthChanged(data) {
        data = data.replace('年', '\/');
        data = data.replace('月', '');
        this.init(data);
      },

      // 获取预约患者列表
      getList() {
        this.$api.get(this.$api.baseURLSchool, "reservation_count/" + localStorage.getItem("loginMobile"), {}, r => {
          if (r.data.ret == 1) {

            this.list = r.data.info;
          }
          if (r.data.ret == -3) {
            localStorage.clear();
            this.isLogin()
          }
        }, err => {
          console.log(err);
        })
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
    },





    created() {
      this.init();
      this.getList()
    },
    mounted(data) {
      // console.log($('.date-num').addClass('odd'))
      var date = new Date(new Date().getTime()) //加上n天的国际标准日期
      var newTime = date.toLocaleString(); //把日期转换成2018/6/4 下午10:45:19 格式
      var arr = newTime.split(" "); //把2018/6/4提取出来
      var arr2 = arr[0].split('/'); //把年月日数字单独提出来
      this.currentDay = arr2[0] + '年' + arr2[1] + '月' + arr2[2] + '日'; //拼接成我们需要的格式返回
      this.currentWeek = '周' + date.getDay();
    }
  }

</script>

<style lang='scss' scoped>
  .kind {
    height: 35px;
    line-height: 35px;
    padding: 0px 10px;

    span:nth-last-of-type(1) {
      float: right;
    }
  }

  #appointmentTime ul {
    margin-top: 0px;
  }

  table {
    width: 3.43rem;
    border-collapse: collapse;
    margin: 10px auto;
    margin-bottom: 0px;

  }

  table,
  th,
  td {
    border: 1px solid #ededed;
    padding: 5px;
    text-align: center;
    color: rgba(0, 0, 0, 0.4)
  }

  th {
    background: #fafafa;
  }

  td {
    color: #fff;

    i {
      width: 0.2rem;
      height: 0.2rem;
      display: block;
      line-height: 0.2rem;
      text-align: center;
      border-radius: 50%;
      background: #54a589;
      margin: auto;


    }
  }

  i {}

</style>
